<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>combogrid</title>
<link rel="stylesheet" type="text/css" href="css/main.css" />
<link rel="stylesheet" type="text/css" href="css/SyntaxHighlighter.css" />

<script type="text/javascript" src="js/shCore.js"></script>
<script type="text/javascript" src="js/shBrushJScript.js"></script>
<script type="text/javascript" src="js/shBrushXml.js"></script>
</head>
<body style="text-align:left">
<div style="padding:10px">

<h3>ComboGrid</h3>
<p>Extend from $.fn.combo.defaults and $.fn.datagrid.defaults. Override defaults with $.fn.combogrid.defaults.</p>
<p>
The combogrid combines a editable text box with drop-down datagrid panel,
from which enables users to quickly find and select.
The combogrid provides keyboard navigation support for selecting an item.
</p>
<img src="images/combogrid.png">

<h4>Dependencies</h4>
<ul>
	<li>combo</li>
	<li>datagrid</li>
</ul>

<h4>Usage Example</h4>
<h5>Create ComboGrid</h5>
<p>1. Create a combogrid from markup.</p>
<div class="dp-highlighter"><div class="bar"><div class="tools"></div></div><ol start="1" class="dp-xml"><li class="alt"><span><span class="tag">&lt;</span><span class="tag-name">select</span><span>&nbsp;</span><span class="attribute">id</span><span>=</span><span class="attribute-value">"cc"</span><span>&nbsp;</span><span class="attribute">class</span><span>=</span><span class="attribute-value">"easyui-combogrid"</span><span>&nbsp;</span><span class="attribute">name</span><span>=</span><span class="attribute-value">"dept"</span><span>&nbsp;</span><span class="attribute">style</span><span>=</span><span class="attribute-value">"width:250px;"</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="attribute">data-options</span><span>="&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;panelWidth:450,&nbsp;&nbsp;</span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;value:'006',&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;idField:'code',&nbsp;&nbsp;</span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;textField:'name',&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;url:'datagrid_data.json',&nbsp;&nbsp;</span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;columns:[[&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{field:'code',title:'Code',width:60},&nbsp;&nbsp;</span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{field:'name',title:'Name',width:100},&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{field:'addr',title:'Address',width:120},&nbsp;&nbsp;</span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{field:'col4',title:'Col41',width:100}&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;]]&nbsp;&nbsp;</span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"<span class="tag">&gt;</span><span class="tag">&lt;/</span><span class="tag-name">select</span><span class="tag">&gt;</span><span>&nbsp;&nbsp;</span></span></li></ol></div><textarea class="html" name="code-combogrid" style="display: none;">	&lt;select id="cc" class="easyui-combogrid" name="dept" style="width:250px;"
			data-options="
				panelWidth:450,
				value:'006',
				idField:'code',
				textField:'name',
				url:'datagrid_data.json',
				columns:[[
					{field:'code',title:'Code',width:60},
					{field:'name',title:'Name',width:100},
					{field:'addr',title:'Address',width:120},
					{field:'col4',title:'Col41',width:100}
				]]
			"&gt;&lt;/select&gt;
</textarea>
<p>
2. The combogrid can be created from existing &lt;select&gt; or &lt;input&gt; element using javascript.
</p>
<div class="dp-highlighter"><div class="bar"><div class="tools"></div></div><ol start="1" class="dp-xml"><li class="alt"><span><span class="tag">&lt;</span><span class="tag-name">input</span><span>&nbsp;</span><span class="attribute">id</span><span>=</span><span class="attribute-value">"cc"</span><span>&nbsp;</span><span class="attribute">name</span><span>=</span><span class="attribute-value">"dept"</span><span>&nbsp;</span><span class="attribute">value</span><span>=</span><span class="attribute-value">"01"</span><span>&nbsp;</span><span class="tag">/&gt;</span><span>&nbsp;&nbsp;</span></span></li></ol></div><textarea class="html" name="code-combogrid" style="display: none;">	&lt;input id="cc" name="dept" value="01" /&gt;
</textarea>
<div class="dp-highlighter"><div class="bar"><div class="tools"></div></div><ol start="1" class="dp-c"><li class="alt"><span><span>$(</span><span class="string">'#cc'</span><span>).combogrid({&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;panelWidth:450,&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;value:<span class="string">'006'</span><span>,&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;idField:<span class="string">'code'</span><span>,&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;textField:<span class="string">'name'</span><span>,&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;url:<span class="string">'datagrid_data.json'</span><span>,&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;columns:[[&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{field:<span class="string">'code'</span><span>,title:</span><span class="string">'Code'</span><span>,width:60},&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{field:<span class="string">'name'</span><span>,title:</span><span class="string">'Name'</span><span>,width:100},&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{field:<span class="string">'addr'</span><span>,title:</span><span class="string">'Address'</span><span>,width:120},&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{field:<span class="string">'col4'</span><span>,title:</span><span class="string">'Col41'</span><span>,width:100}&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;]]&nbsp;&nbsp;</span></li><li class=""><span>});&nbsp;&nbsp;</span></li></ol></div><textarea class="js" name="code-combogrid" style="display: none;">	$('#cc').combogrid({
		panelWidth:450,
		value:'006',
	 
		idField:'code',
		textField:'name',
		url:'datagrid_data.json',
		columns:[[
			{field:'code',title:'Code',width:60},
			{field:'name',title:'Name',width:100},
			{field:'addr',title:'Address',width:120},
			{field:'col4',title:'Col41',width:100}
		]]
	});
</textarea>
<br>
<h5>Autocomplete Functionality</h5>
<p>
Let's add advanced auto-complete functionality to the combogrid.
The drop-down datagrid will display the possible results according to the user types.
</p>
<div class="dp-highlighter"><div class="bar"><div class="tools"></div></div><ol start="1" class="dp-c"><li class="alt"><span><span>$(</span><span class="string">'#cc'</span><span>).combogrid({&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;delay:&nbsp;500,&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;mode:&nbsp;<span class="string">'remote'</span><span>,&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;url:&nbsp;<span class="string">'get_data.php'</span><span>,&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;idField:&nbsp;<span class="string">'id'</span><span>,&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;textField:&nbsp;<span class="string">'name'</span><span>,&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;columns:&nbsp;[[&nbsp;&nbsp;</span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{field:<span class="string">'code'</span><span>,title:</span><span class="string">'Code'</span><span>,width:120,sortable:</span><span class="keyword">true</span><span>},&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{field:<span class="string">'name'</span><span>,title:</span><span class="string">'Name'</span><span>,width:400,sortable:</span><span class="keyword">true</span><span>}&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;]]&nbsp;&nbsp;</span></li><li class="alt"><span>});&nbsp;&nbsp;</span></li></ol></div><textarea class="js" name="code-combogrid" style="display: none;">$('#cc').combogrid({
	delay: 500,
	mode: 'remote',
	url: 'get_data.php',
	idField: 'id',
	textField: 'name',
	columns: [[
		{field:'code',title:'Code',width:120,sortable:true},
		{field:'name',title:'Name',width:400,sortable:true}
	]]
});
</textarea>
<p>
On server side, the 'q' parameter must be retrieve first.
The user can query the database and then return an sql result in JSON format to the browser.
</p>
<p>
get_data.php:
</p>
<div class="dp-highlighter"><div class="bar"><div class="tools"></div></div><ol start="1" class="dp-c"><li class="alt"><span><span>$q&nbsp;=&nbsp;isset($_POST[</span><span class="string">'q'</span><span>])&nbsp;?&nbsp;$_POST[</span><span class="string">'q'</span><span>]&nbsp;:&nbsp;</span><span class="string">''</span><span>;&nbsp;&nbsp;</span><span class="comment">//&nbsp;the&nbsp;request&nbsp;parameter</span><span>&nbsp;&nbsp;</span></span></li><li class=""><span><span class="comment">//&nbsp;query&nbsp;database&nbsp;and&nbsp;return&nbsp;JSON&nbsp;result&nbsp;data</span><span>&nbsp;&nbsp;</span></span></li><li class="alt"><span>$rs&nbsp;=&nbsp;mysql_query(<span class="string">"select&nbsp;*&nbsp;from&nbsp;item&nbsp;where&nbsp;name&nbsp;like&nbsp;'$q%'"</span><span>);&nbsp;&nbsp;</span></span></li><li class=""><span>echo&nbsp;json_encode(...);&nbsp;&nbsp;</span></li></ol></div><textarea class="js" name="code-combogrid" style="display: none;">$q = isset($_POST['q']) ? $_POST['q'] : '';  // the request parameter
// query database and return JSON result data
$rs = mysql_query("select * from item where name like '$q%'");
echo json_encode(...);
</textarea>

<br>
<h4>Properties</h4>
<p>The properties extend from combo and datagrid, below is the added properties for combogrid.</p>
<table class="doc-table">
<tbody><tr>
<th><strong>Name</strong></th>
<th><strong>Type</strong></th>

<th><strong>Description</strong></th>
<th><strong>Default</strong></th>
</tr>
<tr>
<td>loadMsg</td>
<td>string</td>
<td>The message displayed when datagrid load remote data.</td>
<td>null</td>
</tr>
<tr>
<td>idField</td>

<td>string</td>
<td>The id field name.</td>
<td>null</td>
</tr>
<tr>
<td>textField</td>
<td>string</td>
<td>The text field to be displayed in textbox.</td>
<td>null</td>
</tr>

<tr>
<td>mode</td>
<td>string</td>
<td>
Defines how to load datagrid data when text changed. Set to 'remote' if the combogrid loads from server.
When set to 'remote' mode, what the user types will be sent as the http request parameter named 'q' to server to retrieve the new data.
</td>
<td>local</td>
</tr>
<tr>
<td>filter</td>
<td>function(q, row)</td>
<td>
Defines how to select the local data when 'mode' is set to 'local'. Return true to select the row.
<p>Code example:</p>
<pre>$('#cc').combogrid({
	filter: function(q, row){
		var opts = $(this).combogrid('options');
		return row[opts.textField].indexOf(q) == 0;
	}
});
</pre>
</td>

<td></td>
</tr>
</tbody></table>

<br>
<h4>Events</h4>
<p>The events extend from combo and datagrid.</p>

<h4>Methods</h4>
<p>The methods extend from combo, below is the added or overriden methods for combogrid.</p>
<table class="doc-table">
<tbody><tr>
<th><strong>Name</strong></th>
<th><strong>Parameter</strong></th>
<th><strong>Description</strong></th>
</tr>
<tr>
<td>options</td>
<td>none</td>
<td>Return the options object.</td>
</tr>

<tr>
<td>grid</td>
<td>none</td>
<td>
Return the datagrid object.
The example below shows how to get the selected row:
<pre>var g = $('#cc').combogrid('grid');	// get datagrid object
var r = g.datagrid('getSelected');	// get the selected row
alert(r.name);
</pre>
</td>
</tr>
<tr>
<td>setValues</td>
<td>values</td>
<td>
Set the component value array.
<p>Code example:</p>
<pre>$('#cc').combogrid('setValues', ['001','007']);
</pre>
</td>
</tr>
<tr>

<td>setValue</td>
<td>value</td>
<td>
Set the component value.
<p>Code example:</p>
<pre>$('#cc').combogrid('setValue', '002');
</pre>
</td>
</tr>
<tr>
<td>clear</td>
<td>none</td>
<td>Clear the component value.</td>
</tr>
</tbody></table>

</div>
</body>
</html>